<!-- Steps.vue -->
<template>
  <div class="ant-steps" :class="[`ant-steps-${direction}`, `ant-steps-${size}`]">
    <!-- 使用 v-for 遍历默认插槽内容 -->
    <template v-for="(item, index) in defaultSlots" :key="index">
      <StepProvider :index="index">
        <component :is="item" />
      </StepProvider>
    </template>
  </div>
</template>

<script setup>
import { provide, computed, useSlots } from 'vue'

// 新增 StepProvider 组件用于注入 index
const StepProvider = {
  props: ['index'],
  setup(props, { slots }) {
    provide(
      'stepIndex',
      computed(() => props.index),
    )
    return () => slots.default()
  },
}

const slots = useSlots()
const defaultSlots = computed(() => slots.default?.() || [])

const props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
  direction: {
    type: String,
    default: 'horizontal', // vertical
  },
  size: {
    type: String,
    default: 'default', // small
  },
  status: {
    type: String,
    default: 'process', // wait, finish, error
  },
})

// 创建响应式的上下文对象
const stepsContext = {
  current: computed(() => props.current),
  direction: computed(() => props.direction),
  size: computed(() => props.size),
  status: computed(() => props.status),
}

// 提供上下文给子组件
provide('stepsContext', stepsContext)

// 记录当前渲染的步骤索引
let currentIndex = 0
provide('getCurrentIndex', () => currentIndex++)
</script>

<style scoped lang="scss">
.ant-steps {
  position: relative;
  display: flex;
  width: 100%;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    segoe ui,
    Roboto,
    helvetica neue,
    Arial;
}

.ant-steps-vertical {
  flex-direction: column;
}

.ant-steps-small .ant-step-item-title {
  font-size: 12px;
}

.ant-step-item {
  flex: 1;
  position: relative;
}

/* 水平步骤条连接线 */
.ant-step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 44px;
  top: 16px;
  right: 0;
  border-top: 1px solid #d9d9d9;
}

.ant-steps-vertical .ant-step-item {
  margin-bottom: 20px;
}

/* 垂直步骤条连接线 */
.ant-steps-vertical .ant-step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: -20px;
  border-left: 1px solid #d9d9d9;
}

.ant-step-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  position: relative;
  z-index: 1;
}

.ant-step-item-title {
  color: rgba(0, 0, 0, 0.88);
}

.ant-step-item-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

/* 完成状态 */
.ant-step-item-finish .ant-step-item-icon {
  border-color: #1677ff;
  background: #1677ff;
  color: white;
}

/* 错误状态 */
.ant-step-item-error .ant-step-item-icon {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

/* 进行中状态 */
.ant-step-item-process .ant-step-item-icon {
  border-color: #1677ff;
  color: #1677ff;
}
</style>
